<template>
  <div>
    <div
      class="view"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
      v-if="imgs.leng !== 0"
    >
      <ul
        class="scroll"
        :style="{ width: imgs.length * 100 + '%', left: left, transition: actions }"
        v-if="imgs.length !== 0"
      >
        <li v-for="(item, index) in imgs" :key="index" :style="{ width: 100 / imgs.length + '%' }">
          <img :src="item.picUrl" alt="" :height="height" />
        </li>
      </ul>
    </div>
    <ul class="nav-box" v-if="show">
      <li v-for="(item, index) in navs" :key="index">
        <img :src="navImgs[index]" alt="" />
        <p>{{ item }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  import { getBanner } from "../utils/api/index"
  export default {
    name: "Carousel",
    props: {
      autoPlay: Boolean,
      delay: String,
      show: Boolean,
      height: String,
    },
    data() {
      return {
        imgs: [],
        startX: "",
        direction: "",
        left: "-100%",
        actions: "none",
        isWork: false,
        navs: ["签到", "礼券", "砍价", "专栏"],
        navImgs: [
          require("../assets/imgs/签到.png"),
          require("../assets/imgs/礼券.png"),
          require("../assets/imgs/砍价.png"),
          require("../assets/imgs/专栏.png"),
        ],
      }
    },
    mounted() {
      this.direction = "left"
      this.touchEnd()
      if (this.autoPlay) {
        setInterval(() => {
          this.direction = "left"
          this.touchEnd()
        }, Number(this.delay))
      }
    },
    created() {
      console.log(this.height)
      getBanner().then((res) => {
        this.imgs = res.data
      })
    },
    methods: {
      touchStart(e) {
        this.startX = e.touches[0].pageX
      },
      touchMove(e) {
        let endX = e.touches[0].pageX
        if (endX - this.startX > 0) {
          this.direction = "right"
        } else {
          this.direction = "left"
        }
      },
      touchEnd() {
        if (!this.isWork) {
          if (this.direction === "left") {
            this.isWork = true
            this.actions = "left 500ms"
            this.left = "-100%"
            setTimeout(() => {
              this.isWork = false
              this.actions = "none"
              this.left = "0"
              this.imgs.push(this.imgs.shift())
            }, 500)
          } else if (this.direction === "right") {
            this.isWork = true
            this.actions = "left 500ms"
            this.left = "0"
            setTimeout(() => {
              this.isWork = false
              this.actions = "none"
              this.left = "-100%"
              this.imgs.unshift(this.imgs.pop())
            }, 500)
          }
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  div {
    position: relative;
    .view {
      width: 100%;
      overflow-x: hidden;

      .scroll {
        display: flex;
        position: relative;
        li {
          flex-shrink: 0;
        }
        img {
          width: 100%;
          display: block;
        }
      }
    }
    .nav-box {
      display: flex;
      font-size: 0.32rem;
      justify-content: space-between;
      align-items: center;
      background-color: #ffffff;
      position: absolute;
      width: 100%;
      box-sizing: border-box;
      // height: 1.8rem;
      transform: translateY(-100%);
      padding: 0.2rem 0.8rem;
      border-radius: 20% 20% 0 0;
      li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 1.4rem;
        img {
          width: 0.82rem;
        }
      }
    }
  }
</style>
